<template>
  <div class="Home">
    <div class="seachBox">
      <div class="title_">威胁情报查询</div>
      <!-- <m-input class="input_" v-model="seachValue">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </m-input> -->
      <div class="img_ pr"></div>
      <m-input
        class="input_"
        placeholder="请输入您要查询的IP/域名/漏洞编号"
        @input.native="cleanInput"
        @keyup.enter.native="handleIconClick(input)"
        v-model="input"
      >
        <el-button
          class="btn"
          slot="append"
          icon="el-icon-search"
          @click="handleIconClick(input)"
        ></el-button>
      </m-input>
      <div class="shili">
        <div class="label">示例</div>
        <div class="val">51.68.143.81</div>
        <!--        <div class="val">66.117.6.174/update.txt</div>-->
        <div class="val">fget-career.com</div>
        <!--        <div class="val">a7452cbc08dc30a139eba09b1ae70b04</div>-->
        <div class="val">CVE-2023-23638</div>
      </div>
      <div class="mode">
        <div class="ti">接入情报源</div>
        <div class="no-data" v-if="sourceList.length === 0">
          <div class="no-data-img"></div>
          <div class="no-data-text">
            当前尚未接入任何情报源，为确保信息获取的及时性与准确性，请尽快<span
              class="blue-text"
              @click="handleGoSource"
              >接入相关情报源</span
            >。
          </div>
        </div>
        <el-row :gutter="24" v-if="sourceList.length > 0">
          <el-col
            :span="12"
            :key="index"
            v-for="(item, index) in sourceList"
          >
            <div class="grid">
              <div class="name">
                <div class="icon" :class="item.id==1? 'zidingyi': 'weibu'"></div>
                {{ item.name }}
              </div>
              <div class="date">更新于{{ item.updated_at }}</div>
              <div class="status">
                <span
                  class="dian"
                  :class="item.status === 0 ? 'sucess' : 'error'"
                ></span>
                {{ item.status === 0 ? "接入正常" : "接入异常" }}
              </div>
            </div>
          </el-col>
          <!--          <el-col :span="12">
            <div class="grid">
              <div class="name">
                <div class="icon BH"></div>
                绿盟科技
              </div>
              <div class="date">更新于2023-11-17 09:59:40</div>
              <div class="status">
                <span class="dian error"></span> 接入异常
              </div>
            </div>
          </el-col>-->
        </el-row>
        <!--        <el-row :gutter="24">
          <el-col :span="12">
            <div class="grid">
              <div class="name">
                <div class="icon BH"></div>
                情报源
              </div>
              <div class="on_">即将上线</div>
            </div>
          </el-col>
        </el-row>-->
      </div>
    </div>
  </div>
</template>

<script>
// 引入接口
import { IntelligenceSearch } from "@/request/home/index";
import {
  intelligenceMockUserLogin,
  intelligenceXXX,
} from "@/request/source/index";
import { sourceList } from "@/request/source/index";
import dayjs from "dayjs";
import error from "@/views/main/error";

export default {
  name: "Home",
  data() {
    return {
      input: "",
      restaurants: [],
      state: "",
      sourceList: [],
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.restaurants = this.loadAll();
    this.getSourceList();
    // intelligenceMockUserLogin()
    //   .then(() => {})
    //   .catch(() => {});
    /*intelligenceXXX().then(()=>{

    }).catch(()=>{

    });*/
  },
  methods: {
    cleanInput(event) {
      // 使用DOM的innerText和outerText方法来清理掉非法的输入
      // 获取输入框当前的值
      let value = event.target.value;
      // 过滤掉不允许的字符
      value = value.replace(/[<>]/g, "");
      // 更新数据以移除非法字符
      this.input = value;
      // 重设光标位置
      event.target.value = this.input;
    },
    loadAll() {
      return [
        { value: "66.117.6.174/update.txt" },
        { value: "fget-career.com" },
        { value: "51.68.143.81" },
        { value: "a7452cbc08dc30a139eba09b1ae70b04" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleGoSource() {
      this.$router.push({ path: "/source" });
    },
    getSourceList() {
      sourceList()
        .then((res) => {
          console.log(res.data.data);
          this.sourceList = res.data.data;
          // this.sourceList = []
          this.sourceList.map((item) => {
            item.updated_at = dayjs(item.updated_at).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
        })
        .catch(() => {});
    },
    handleIconClick(ev) {
      console.log(ev);
      IntelligenceSearch({ value: ev })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              if (resData.data.intel_type == 0) {
                if (!resData.data.ip_info.details) {
                  this.$message.error("未查询到数据！");
                  return false;
                }
                this.$m.to("HomeIpDetail", {
                  types: resData.data.intel_type,
                  value: this.input,
                });
              } else if (resData.data.intel_type == 1) {
                if (!resData.data.domain_info.details) {
                  this.$message.error("未查询到数据！");
                  return false;
                }
                this.$m.to("HomeDomainDetail", {
                  types: resData.data.intel_type,
                  value: this.input,
                });
              } else if (resData.data.intel_type == 4) {
                if (!resData.data.vuln_info.items) {
                  this.$message.error("未查询到数据！");
                  return false;
                }
                this.$m.to("HomeMySqlDetail", {
                  types: resData.data.intel_type,
                  value: this.input,
                });
              } else {
                this.$message.error("未查询到数据！");
              }
            } else {
              this.$alert(res.statusText);
            }
          }
        })
        .catch((error) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";
.Home {
  .seachBox {
    position: relative;
    height: px2(214);
    padding: px2(42) px2(124);
    background: linear-gradient(
      180deg,
      #f5f9ff 0%,
      rgba(237, 244, 255, 0) 100%
    );
    .img_ {
      position: absolute;
      right: px2(0);
      top: px2(0);
      width: px2(200);
      height: px2(200);
      background-image: url("./../../../assets/image/home/icon-seach.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .title_ {
      font-size: px2(24);
      font-weight: 600;
      margin-bottom: px2(36);
      text-align: center;
      color: $fontColorW;
    }
    .btn {
      background-color: $mainColor;
    }
    ::v-deep .el-input-group__append {
      border: none;
    }
    ::v-deep .input_ {
      width: 100%;
      .el-input__inner {
        height: px2(40);
        line-height: px2(40);
      }
      .el-input-group__append {
        background-color: $mainColor;
        width: px2(40);
        height: px2(40);
        padding: 0;
        .el-button {
          width: px2(40);
          height: px2(40);
          padding: 0;
          margin: 0;
        }
      }
      .el-icon-search {
        font-size: px2(16);
        color: #fff;
      }
    }
  }
  .mode {
    margin: 0 auto;
    margin-top: px2(100);
    border: px2(1) solid $borderColor;
    padding: px2(12) px2(16);
    min-height: px2(200);
    position: relative;
    .ti {
      font-size: px2(14);
      color: $fontColorW;
      font-weight: bold;
      margin-bottom: $gap;
    }
    .no-data {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      .no-data-img {
        width: px2(128);
        height: px2(128);
        margin: auto;
        background-image: url("./../../../assets/image/home/no_data.png");
      }
      .no-data-text {
        font-size: px2(14);
        color: #97999f;
        font-weight: bold;
        .blue-text {
          color: #1c6eff;
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
    .grid {
      background-color: #f7f9fc;
      height: px2(40);
      display: flex;
      flex-wrap: nowrap;
      justify-content: start;
      font-size: px2(12);
      padding: px2(10);
      .el-col {
        margin-bottom: px2(20);
      }
      .name {
        // margin-right: px2(40);
        width: 25%;
        color: $fontColor;
        .icon {
          display: inline-block;
          vertical-align: middle;
          width: px2(12);
          height: px2(12);
          margin-right: px2(3);
          &.weibu {
            background-image: url("./../../../assets/image/home/LOGO2.png");
            background-size: 100% 100%;
          }
          &.zidingyi {
            background-image: url("./../../../assets/image/home/LOGO1.png");
            background-size: 100% 100%;
          }
        }
      }
      .on_ {
        color: #a1a7b3;
      }
      .date {
        color: $fontColorL;
        //width: 35%;
        width: 55%;
        //margin-right: px2(40);
      }
      .status {
        width: 20%;
        .dian {
          display: inline-block;
          vertical-align: middle;
          width: px2(6);
          height: px2(6);
          border-radius: 50%;
          &.sucess {
            background-color: #45d9a3;
          }
          &.error {
            background-color: #db4c35;
          }
        }
      }
    }
  }
}
.shili {
  width: 100%;
  height: px2(54);
  border-radius: px2(2);
  background: #ffffff;
  // box-shadow: 0px px2(4) px2(12) 0px rgba(30, 35, 43, 0.14);
  font-size: px2(12);
  color: #6f7785;
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
  padding: 0 px2(20);
  .label {
    margin-right: px2(16);
  }
  .val {
    margin-left: px2(8);
    // border: px2(1) solid #ddd;
    height: px2(24);
    padding: px2(6) px2(12);
  }
}
.el-row {
  margin-bottom: px2(10);
  &:last-child {
    margin-bottom: 0;
  }
  .el-col {
    padding-right: 0 !important ;
    &:last-child {
      padding-right: px2(10) !important;
    }
  }
}
</style>
